<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRoute } from "vue-router";

import { invoke } from "@tauri-apps/api/core";

interface Material {
    id: number;
    code: string;
    name: string;
    price: number;
    amount: number;
    length: number;
    width: number;
    thickness: number; //厚度
    residual: number; //误差
    color_code: String;
    parent_id: number;
    supplier_id: number;
    background_material: string;
}

let material = ref<Material>({
    id: 1,
    code: "123456",
    name: "Material 1",
    price: 100,
    length: 100,
    width: 100,
    thickness: 100,
    residual: 0.001,
    color_code: "#FFFFFF",
    parent_id: 0,
    supplier_id: 0,
    background_material: "PUC",
    status: 1,
    amount: 8909.0,
});
let isDisable = ref(false);
let unit = ref("元");

function saveMaterial() {
    invoke("save_material", { data: JSON.stringify(material.value) })
        .then(() => {
            console.log("Material saved");
        })
        .catch((error) => {
            console.error("Failed to save material:", error);
        });
}
</script>

<template>
    <main class="container p-5 w-screen">
        <div>
            <h3 class="text-lg font-bold">基本信息</h3>
            <div
                class="mt-5 mb-2 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
            >
                <label class="floating-label">
                    <span>材料编码</span>
                    <input
                        type="tel"
                        v-model="material.code"
                        placeholder="材料编码"
                        class="input input-md"
                        :disabled="isDisable"
                    />
                </label>
                <label class="floating-label">
                    <span>材料名称</span>
                    <input
                        type="tel"
                        v-model="material.name"
                        placeholder="材料名称"
                        class="input input-md"
                        :disabled="isDisable"
                    />
                </label>
                <label class="floating-label">
                    <span>供应商</span>
                    <input
                        type="String"
                        v-model="material.name"
                        placeholder="联系人电话"
                        class="input input-md"
                        :disabled="isDisable"
                    />
                </label>
                <label class="floating-label">
                    <span>联系人电话</span>
                    <input
                        type="tel"
                        v-model="material.name"
                        placeholder="联系人电话"
                        class="input input-md"
                        :disabled="isDisable"
                    />
                </label>
            </div>
        </div>

        <div>
            <h3 class="text-lg font-bold">尺寸及颜色</h3>
            <div
                class="mt-5 mb-2 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
            >
                <label class="floating-label">
                    <span>长度（米）</span>
                    <input
                        type="number"
                        v-model="material.length"
                        placeholder="长度"
                        class="input input-md"
                        :disabled="isDisable"
                    />
                </label>
                <label class="floating-label">
                    <span>宽度（米）</span>
                    <input
                        type="number"
                        v-model="material.width"
                        placeholder="宽度"
                        class="input input-md"
                        :disabled="isDisable"
                    />
                </label>
                <label class="floating-label">
                    <span>厚度（毫米）</span>
                    <input
                        type="number"
                        v-model="material.thickness"
                        placeholder="厚度"
                        class="input input-md"
                        :disabled="isDisable"
                    />
                </label>
                <label class="floating-label">
                    <span>误差(毫米)</span>
                    <input
                        v-model="material.residual"
                        placeholder="误差"
                        class="input input-md"
                        :disabled="isDisable"
                    />
                </label>
                <label class="floating-label">
                    <span>颜色</span>
                    <input
                        v-model="material.color_code"
                        placeholder="颜色"
                        class="input input-md"
                        :disabled="isDisable"
                    />
                </label>
                <div class="flex flex-row align-middle">
                    <label class="floating-label w-5/8">
                        <span>价格(美金)</span>
                        <input
                            type="number"
                            v-model="material.price"
                            placeholder="价格"
                            class="input input-md"
                            :disabled="isDisable"
                        />
                    </label>
                    <div class="dropdown dropdown-start">
                        <div tabindex="0" role="button" class="btn m-1">
                            {{ unit }}
                        </div>
                        <ul
                            tabindex="0"
                            class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm"
                        >
                            <li><a>人民币</a></li>
                            <li><a>美元</a></li>
                            <li><a>欧元</a></li>
                            <li><a>英镑</a></li>
                            <li><a>日元</a></li>
                            <li><a>韩元</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="relative bottom-2.5 justify-center flex mt-8 inset-x-0">
                <button class="btn btn-base mr-8">
                    <svg
                        class="w-6 h-6 text-gray-800 dark:text-white"
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M10.779 17.779 4.36 19.918 6.5 13.5m4.279 4.279 8.364-8.643a3.027 3.027 0 0 0-2.14-5.165 3.03 3.03 0 0 0-2.14.886L6.5 13.5m4.279 4.279L6.499 13.5m2.14 2.14 6.213-6.504M12.75 7.04 17 11.28"
                        />
                    </svg>
                    编辑
                </button>
                <button class="btn btn-base" @click="saveMaterial">
                    <svg
                        class="w-6 h-6 text-gray-800 dark:text-white"
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-width="2"
                            d="M11 16h2m6.707-9.293-2.414-2.414A1 1 0 0 0 16.586 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7.414a1 1 0 0 0-.293-.707ZM16 20v-6a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v6h8ZM9 4h6v3a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Z"
                        />
                    </svg>
                    保存
                </button>
            </div>
        </div>
    </main>
</template>
